<template>
	<view class="user-in-login">
		<!-- 上方文字 -->
		<view class="">
			<view class="login-text-one">找回密码</view>
			<view class="login-text-two">Find password</view>
		</view>
		<!-- 登录输入信息 -->
		<view class="in-msg">
			<!-- <u-field v-model="mobile" label="手机号" :clearable="true" placeholder="手机号" placeholder-style="color: #9d9e9e"></u-field>
			<u-field v-model="pass" label="密码" :right-icon="eyes" @right-icon-click="eyeControl" :clearable="false" placeholder="密码必须以字母开头" placeholder-style="color: #9d9e9e" :password="!showPass"></u-field> -->
			<u-form :model="form" ref="uForm">
				<u-form-item label="邮箱" prop="email"label-width="200rpx">
					<u-input v-model="form.email" placeholder="邮箱"/>
				</u-form-item>
				<u-form-item label="验证码" prop="code" label-width="200rpx">
					<u-input v-model="form.code" type="text" placeholder="验证码(6个字符)"/>
					<button type="default" class="sendCode" :class="{'endTime':isTime}" @click="throttleTimer">{{isTime?time+"s":"发送验证码"}}</button>
				</u-form-item>
			</u-form>
		</view>
		<!-- 忘记密码 -->
		<view class="lost-pass" @click="login">已有账号，立即登录</view>
		<!-- 登录注册 -->
		<view class="login-register">
			<u-button shape="circle" class="login" hover-class="none" @click="submit">下一步</u-button>
		</view>	
	</view>
</template>

<script>
	import {postEmail,postCode} from "../../../network/login.js"
	
	export default{
		updated() {
				this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
					isTime:false,
					time:60,
					isThrottleTimer:null,
					form:{
							email:"",
							code:"",
						},
					rules: {
						email: [
							{ 
								required: true, 
								message: '请输入正确邮箱', 
								pattern:  /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
							}
						],
						code: [
							{
								required: true, 
								pattern: /^\d{6}$/,
								message: '请输入正确验证码', 
							}
						]
					}
			}
		},
		methods:{
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						postCode(this.form.code).then(res=>{
							if(res.data.code == "K001"){
								uni.showToast({
								    title: res.data.msg,
								    duration: 2000,
									icon:'none'
								});
								setTimeout(()=>{
									uni.navigateTo({
										url:"LostNext"
									})
								},2000)
							}
						})
						
						
					}
				});
			},
			login(){
				uni.navigateTo({
					url:"Login"
				})
			},
			throttleTimer(){	
				this.$u.throttle(()=>{
						this.time = 60
						this.isTime = true
						setInterval(()=>{
							this.time--
							if(this.time==0){
								clearInterval()
								this.time=60
								this.isTime=false
							}
						},1000)
				}, 3000)
				postEmail(this.form.email).then(res=>{
					if(res.data.code !== "J001"){
						uni.showToast({
						    title: res.data.msg,
						    duration: 2000,
							icon:'none'
						});
					}
				})
			},
		},
	}
</script>

<style scoped>
	.user-in-login{
		margin: 200rpx 20rpx 0rpx 20rpx;
	}
	.login-text-one{
		font-size: 60rpx;
		font-weight: bold;
		color: #626566;
	}
	.login-text-two{
		font-size: 30rpx;
		margin-top: 60rpx;
		color: #9d9e9e;
	}
	.in-msg{
		margin-top: 60rpx;
	}
	.lost-pass{
		float: right;
		margin-top: 30rpx;
	}
	.login-register{
		width: 100%;
		margin-top: 120rpx;
	}
	.login{
		width: 100%;
		color: #FFFFFF;
		font-size: 30rpx;
		background-color: #0C34BA;
	}
	.sendCode{
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 30rpx;
		margin-right: 20rpx;
		background-color: #0C34BA;
		color: #FFFFFF;
		width: 200rpx;
	}
	.endTime{
		background-color: #FFFFFF;
		color: #303133;
	}
</style>
